<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="icon" type="image/png" href="../img/icon.png">
    <link rel="stylesheet" href="../css/stu_center.css">
    <link rel="stylesheet" href="../css/all.css">
    <link rel="stylesheet" href="../css/toastr.min.css">
    <style>
    </style>
</head>
<body>
<div id="app" v-cloak>
    <h2>个人中心</h2>
    <div class="content">
        <div class="left-area">
            <div>
                <span>{{loginStu.name}}</span>
                <a class="logout-link" href="javascript:;" @click=" doLogout " >退出</a>
            </div>
            <hr>
            <ul class="menu-list" >
                <li v-for="(menu, index) in menuArr"
                    :class=" 'menu-item' + (menu.selected ? ' menu-item-active':'') "
                    @click="doSelectMenuItem(menu)"
                >
                    {{menu.name}}
                </li>
            </ul>
        </div>
        <div class="center-area">
            <div :style=" 'display: ' + (menuArr[0].selected ? 'block':'none') " class="item-card" id="stuSettingDiv" >

                <fieldset class="set-item">
                    <legend>密码修改</legend>
                    <div class="form-item">
                        <label class="form-label">旧密码:</label>
                        <input class="form-input" type="password" name="oldPwd" v-model="pwdInfo.oldPwd">
                    </div>
                    <div class="form-item">
                        <label class="form-label">新密码:</label>
                        <input class="form-input" type="password" name="newPwd" v-model="pwdInfo.newPwd">
                    </div>
                    <div class="form-item">
                        <label class="form-label">确认密码:</label>
                        <input class="form-input" type="password" name="rePwd" v-model="pwdInfo.rePwd">
                    </div>
                    <div class="form-item text-center">
                        <button type="button" class="btn" @click="doResetPwdModifyForm" >重&nbsp;置</button>
                        <button type="button" class="btn btn-primary" @click="doPwdModify" >修&nbsp;改</button>
                    </div>
                </fieldset>

                <hr>

                <fieldset class="set-item">
                    <legend>信息修改</legend>
                    <div class="form-item">
                        <label class="form-label">姓名:</label>
                        <input class="form-input" type="text" name="name" v-model="modifyStu.name" >
                    </div>
                    <div class="form-item">
                        <label class="form-label">性别:</label>
                        <label>
                            <input class="form-radio" type="radio" name="sex" value="1" v-model="modifyStu.sex" >
                            <span>男</span>
                        </label>
                        <label>
                            <input class="form-radio" type="radio" name="sex" value="2" v-model="modifyStu.sex" >
                            <span>女</span>
                        </label>
                    </div>
                    <div class="form-item">
                        <label class="form-label">身份证:</label>
                        <input class="form-input" type="text" name="idCard" v-model="modifyStu.idCard" >
                    </div>
                    <div class="form-item">
                        <label class="form-label">手机号:</label>
                        <input class="form-input" type="text" name="phone" v-model="modifyStu.phone" >
                    </div>
                    <div class="form-item text-center">
                        <button type="button" class="btn" @click="doResetStuModifyForm" >重&nbsp;置</button>
                        <button type="button" class="btn btn-primary" @click="doStuModify" >修&nbsp;改</button>
                    </div>
                </fieldset>

            </div>
            <div :style=" 'display: ' + (menuArr[1].selected ? 'block':'none') " class="item-card" id="stuExamSearchDiv" >
                <table class="table">
                    <thead>
                        <tr>
                            <th>考试名称</th>
                            <th>得分</th>
                            <th>排名</th>
                            <th>违规</th>
                            <th>交卷时间</th>
                            <th>详情</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(exam,index) in pageInfo.list" >
                            <td>{{exam.examName}}</td>
                            <td>{{exam.totalScore/10}}</td>
                            <td>第{{exam.scoreRank}}名</td>
                            <td>{{exam.count}}次</td>
                            <td>{{exam.createDate}}</td>
                            <td><a :href=" baseUrl + '/stu/stu_exam_paper_detail.html?examPaperId=' + exam.examPaperId " target="_blank">详情</a></td>
                        </tr>
                        <tr v-if="pageInfo.pages == 0">
                            <td colspan="4" style="color: #5d9cec;font-size: 20px;cursor: pointer" @click="doGoPage(0)" >暂无数据, 点击刷新</td>
                        </tr>
                    </tbody>
                </table>
                <hr>
                <div class="page-list" >
                    <a @click="doGoPage(-1)" class="page-item" v-if="pageInfo.pageNum > 1" >
                        <span>&lt;&lt;</span>
                    </a>

                    <a :class=" 'page-item' + (num == pageInfo.pageNum ? ' item-active' : '') " @click="doGoPage(num - pageInfo.pageNum)" v-for=" (num) in pageInfo.navigatepageNums " >
                        <span>{{num}}</span>
                    </a>

                    <a @click="doGoPage(1)" class="page-item" v-if="pageInfo.pageNum < pageInfo.pages" >
                        <span>&gt;&gt;</span>
                    </a>
                </div>
            </div>

            <div :style=" 'display: ' + (menuArr[2].selected ? 'block':'none') " class="item-card" id="stuDoExamDiv" >
                <fieldset class="set-item">
                    <legend>考试</legend>
                    <div class="form-item">
                        <label class="form-label">考试验证码:</label>
                        <input class="form-input" type="text" name="examCode" v-model="examCode" placeholder="请输入考试验证码">
                    </div>
                    <div class="form-item text-center">
                        <button type="button" class="btn btn-success" @click=" doStartExam " >去考试</button>
                        <a style="display: none;" :href=" startExamUrl " target="_blank" ref="go_exam" >去考试</a>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>

<script src="../js/vue.min.js" ></script>
<script src="../js/jquery-3.3.1.min.js" ></script>
<script src="../js/toastr.min.js" ></script>
<script src="../js/base.js" ></script>
<script>
    //Vue.config.devtools = true; // 描述浏览器调试工具是否可用
    new Vue({
        el: "#app",
        data: {
            baseUrl: baseUrl,
            loginStu: {
                loginName: "tom",
                name: "汤姆",
                sex: "1",
                idCard: "320123111122221234",
                phone: "12345678901",
                classId: "1"
            },
            pwdInfo: {
                oldPwd: "",
                newPwd: "",
                rePwd: ""
            },
            modifyStu: {
                loginName: "tom",
                name: "汤姆",
                sex: "1",
                idCard: "320123111122221234",
                phone: "12345678901",
                classId: "1"
            },
            examCode: '',
            menuArr: [
                {id:1,name:"个人设置", selected: false },
                {id:2,name:"考试查询", selected: false },
                {id:2,name:"参与考试", selected: true }
            ],
            menuHtml: "<h2>欢迎使用在线考试系统</h2>",
            pageInfo: {
                pageNum: 1,
                pageSize: 5,
                pages: 1,
                list: [],
                navigatepageNums: []
            },
            startExamUrl: 'javascript:void(0);'
        },
        beforeMount() {
            let str = localStorage.getItem("stuLogin");
            if(str && str.trim()) {
                try {
                    this.loginStu = JSON.parse(str);
                    this.modifyStu = JSON.parse(str);
                    this.doLoadInitData();
                } catch(e) {
                    toastr.error("您未登录！");
                    setTimeout(()=>{
                        location.href = baseUrl + "/public/login.html";
                    }, 500);
                }
            }
        },
        methods: {
            doLoadInitData() {
                this.doGoPage(0);
            },
            doResetPwdModifyForm() {
                this.pwdInfo = {
                    oldPwd: "",
                    newPwd: "",
                    rePwd: ""
                };
            },
            doResetStuModifyForm() {
                this.modifyStu = JSON.parse(JSON.stringify(this.loginStu));
            },
            doSelectMenuItem(item){
                this.menuArr.forEach( m => m.selected = false );
                item.selected = true;
                // if(item.id == 2) {
                //     this.doGoPage(0);// 刷新
                // }
            },
            doGoPage(num) {
                let pageInfo = this.pageInfo;
                let newPageNum = pageInfo.pageNum + num;
                if(newPageNum != 1) {
                    if(newPageNum < 1 || newPageNum > pageInfo.pages) {
                        return;
                    }
                }
                // loadData
                $.ajax({
                    type: 'post',
                    url: baseUrl + "/front/paper/findExams",
                    data: {
                        pageNum: newPageNum,
                        pageSize: pageInfo.pageSize
                    },
                    dataType: 'json',
                    success: ({msg, success, data}) => {
                        if(success) {
                            this.pageInfo = data;
                            return;
                        }
                        toastr.warning(msg);
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            },
            doLogout() {
                $.get(baseUrl + "/front/stu/logout", ({msg, success}) => {
                    if(success) {
                        localStorage.removeItem("stuLogin");
                        setTimeout(()=>{
                            location.href = baseUrl + "/public/login.html";
                        }, 500);
                        return;
                    }
                    toastr.warning(msg);
                });
            },
            doStuModify() {
                let num = 0;// 修改的信息数量
                let stu = {};
                if(this.loginStu.name != this.modifyStu.name) {
                    stu.name = this.modifyStu.name;
                    num++;
                }
                if(this.loginStu.sex != this.modifyStu.sex) {
                    stu.sex = this.modifyStu.sex;
                    num++;
                }
                if(this.loginStu.idCard != this.modifyStu.idCard) {
                    stu.idCard = this.modifyStu.idCard;
                    num++;
                }
                if(this.loginStu.phone != this.modifyStu.phone) {
                    stu.phone = this.modifyStu.phone;
                    num++;
                }
                console.log(stu);
                if(num > 0) {
                    toastr.info("功能正在实现中...");
                }
            },
            doPwdModify() {
                let param = this.pwdInfo;
                console.log(this.pwdInfo);
                // stuId, oldPwd, newPwd, rePwd
                $.ajax({
                    type: 'post',
                    url: baseUrl + "/front/stu/modifyPwd",
                    data: param,
                    dataType: 'json',
                    success: ({msg, success, data}) => {
                        if(success) {
                            toastr.success("修改成功, 请重新登录");
                            setTimeout(()=>{
                                this.doLogout();
                            }, 500);
                            return;
                        }
                        toastr.warning(msg);
                    },
                    error: (xhr) => {
                        toastr.error('网络异常');
                    }
                });
            },
            doStartExam(e) {
                if(this.examCode && this.examCode.trim()) {
                    $.get(baseUrl + '/front/paper/checkExamCode', {code: this.examCode}, ({msg, success})=>{
                        if(success) {
                            this.startExamUrl = baseUrl + "/stu/stu_exam_paper_online.html?code=" + this.examCode;
                            //console.log(this.$refs);
                            this.$nextTick(()=>{
                                this.$refs.go_exam.click();
                            });
                            return;
                        }
                        toastr.warning(msg);
                    }, 'json');
                    return;
                }
                toastr.warning("验证码不能为空");
            }
        }
    });
</script>
</body>
</html>